<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import NavbarDefault from "@/examples/navbars/NavbarDefault.vue";
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
//images
import vueMkHeader from "@/assets/img/products/alltires-bg.png";

import { listPage } from "@/api/tires";
const router = useRouter();
const list = [
    [
        {
            type: "HIGH PERFORMANCE",
            children: [{ name: "M-TRAC HP" }, { name: "M-TRAC GT" }],
        },
        {
            type: "PASSENGER",
            children: [{ name: "M-TRAC TOUR" }, { name: "M-TRAC HP" }, { name: "M-TRAC GT" }],
        },
        {
            type: "OFF ROAD",
            children: [{ name: "BADLANDS AT" }, { name: "BADLANDS RT" }, { name: "BADLANDS MT" }],
        },
    ],
    [
        {
            type: "CUV & SUV & LIGHT TRCUK",
            children: [{ name: "BADLANDS ATX" }, { name: "BADLANDS AT" }, { name: "BADLANDS RT" }, { name: "BADLANDS MT" }, { name: "M-TRAC CUV" }, { name: "M-TRAC GT" }, { name: "M-TRAC HT" }],
        },
        {
            type: "HIGH PERFORMANCE",
            children: [{ name: "UN-203" }, { name: "UN-ALL STEEL" }],
        },
    ],
    [
        {
            type: "COMMERCIAL TRUCK",
            children: [{ name: "M-TRAC AP" }, { name: "M-TRAC CSD" }, { name: "M-TRAC TR" }, { name: "M-TRAC HTD" }, { name: "M-TRAC OSD" }, { name: "M-TRAC MS" }, { name: "M-TRAC MST" }, { name: "M-TRAC MSF" }],
        },
    ],
];
let goodList = ref([]);
listPage({ pageNum: 1, pageSize: 999 }).then((res) => {
    goodList.value = res.data.records;
});
const toPath = (name) => {
    const indexItem = goodList.value.find((item) => item.productName == name);
    console.log("indexItem", indexItem.id);
    router.push(`/detail?id=${indexItem.id}`);
};
</script>

<template>
    <div class="page-header min-vh-75 flex-column pt-4 pb-9 mt-5" :style="`background: url(${vueMkHeader});no-repeat top / contain`" loading="lazy">
        <div class="container">
            <h1 class="text-black mb-5 text-f-ERASBD">ALL Tires</h1>
            <div class="row1">
                <div class="row">
                    <div class="col-lg-4" :class="index1 == list.length - 1 ? 'col-lg-last' : ''" v-for="(listItem, index1) in list" :key="index1">
                        <div v-for="(item, index2) in listItem" :key="index2">
                            <div v-if="index1 == list.length - 1">
                                <h5 class="text-red mb-3 mt-2 text-f-Montserrat-Bold">{{ item.type }}</h5>
                            </div>
                            <div v-else class="row">
                                <h5 class="col-6 text-red mb-3 mt-2 text-f-Montserrat-Bold">{{ item.type }}</h5>
                                <span class="col-6"></span>
                            </div>

                            <div v-if="index1 == list.length - 1" class="row">
                                <div class="col-lg-6" v-for="(child, index3) in item.children" :key="index3">
                                    <p class="text-f-Montserrat-Regular show-pointer" @click="toPath(child.name)">{{ child.name }}</p>
                                </div>
                            </div>
                            <div v-else>
                                <p class="text-f-Montserrat-Regular show-pointer" v-for="(child, index3) in item.children" :key="index3" @click="toPath(child.name)">{{ child.name }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row2">
                <div class="row">
                    <div class="col-lg-4" v-for="(listItem, index1) in list" :key="index1">
                        <div v-for="(item, index2) in listItem" :key="index2">
                            <h5 class="text-red mb-3 mt-2 text-f-Montserrat-Bold">{{ item.type }}</h5>
                            <p class="text-f-Montserrat-Regular show-pointer" v-for="(child, index3) in item.children" :key="index3" @click="toPath(child.name)">{{ child.name }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mt-4">
            <h1 class="text-black mb-5 text-f-ERASBD">Subscribe To Our Newsietter</h1>
            <form role="form" id="contact-form" method="post" autocomplete="off">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <MaterialInput class="input-group-outline" :label="{ text: 'First Name', class: 'form-label' }" type="text" />
                        </div>
                        <div class="col-md-3 mb-2">
                            <MaterialInput class="input-group-outline" :label="{ text: 'Last Name', class: 'form-label' }" type="text" />
                        </div>
                        <div class="col-md-3 mb-2">
                            <MaterialInput class="input-group-outline" :label="{ text: 'Email', class: 'form-label' }" type="email" />
                        </div>
                        <div class="col-md-3 mb-2">
                            <MaterialButton class="bg-red">SUBSCRIBE</MaterialButton>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <MaterialCheckbox id="terms" color="danger" checked>
                                <span class="text-red text-f-Montserrat-Bold"> I agree to receive promotional emails from mastertrack . I understand I can opt-out anytime. </span>
                            </MaterialCheckbox>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="d-flex justify-content-center">
            <NavbarDefault :isBootom="true" transparent style="background: #000; top: unset !important; bottom: 3rem; width: 90% !important; border-radius: 1rem" />
        </div>
    </div>
</template>
<style scoped>
p {
    color: #9e9e9e !important;
}
.form-check {
    padding-left: 0 !important;
}

@media (min-width: 0px) and (max-width: 991.97px) {
    .row1 {
        display: block !important;
    }
    .row2 {
        display: none !important;
    }
    .row1 .col-lg-4 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-4.col-lg-last {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}
@media (min-width: 991.98px) {
    /* .col-lg-4 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-last {
        flex: 0 0 auto;
        width: 100%;
    }
    .col-last .col-last-p {
        flex: 0 0 auto;
        width: 50%;
    } */
    .row1 {
        display: none !important;
    }
    .row2 {
        display: block !important;
    }
}
</style>
